<template>
  <div>
    <div id="article" class="aticle" :class="{boxheight: path.startsWith('/personal')}">
      <!-- 回到顶部 -->
      <el-backtop target=".aticle" :visibility-height="200" style="user-select:none"></el-backtop>
      <div :class="{ bg:sign }">
        <!-- 标题 -->
        <div id="article-title">{{ article.title }}</div>
        <!-- 作者、日期、浏览量 -->
        <div id="article-info" v-if='sign'>
          <span class="name">{{ article.user_name  }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span class="time">{{ getTime(article.time) }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span class="view">
            <i class="iconfont icon-liulan" /> {{ article.views }}
          </span>
        </div>
        <!-- 正文 -->
        <Article id='article-content' :content='article.content' />
        <!-- 评论区 -->
        <div id="article-comment" v-if='sign'>
          <h2>评论</h2>
          <!-- 评论输入 -->
          <div class="comment_input">
            <el-avatar :src="login_avatar"></el-avatar>
            <el-input type="textarea" :rows="3" v-model="comment_input" placeholder="有什么想说的嘛？" @focus="publish_btn_show=true"
              @blur='comment_input_blur'></el-input>
          </div>
          <div class="publish_div" v-if='publish_btn_show'>
            <el-button size="mini" class="publish_btn" @click="addComment()">发表评论</el-button>
          </div>
          <!-- 暂无评论 -->
          <div class="comment_empty" v-show='comment_total==0'>
            <el-empty description="暂无评论"></el-empty>
          </div>
          <!-- 评论列表 -->
          <div class="comment_list" v-show='comment_total>0'>
            <h2>全部评论 {{ comment_total }} </h2>
            <!-- 一级评论列表 -->
            <div class="comment-first-list" v-for="(item) in comment_list" :key='item.comment_id'>
              <!-- 一级评论 -->
              <div class="comment-item">
                <!-- 评论信息 -->
                <div class="comment-item-header">
                  <el-avatar :src="item.user_all.avatar"></el-avatar>
                  <div class="info">
                    <span class="name">{{ item.from_user_name }}</span>
                    <span class="time">{{ getTime(item.time) }}</span>
                  </div>
                  <div class="tool">
                    <span @click="deleteComment(item)" v-show="isDeleteShow(item)">
                      <i class="iconfont icon-shanchu"> 删除</i>
                    </span>
                    <span @click="showReply(item)">
                      <i class="iconfont icon-huifu"> {{ item.reply_show ? " 收起" : " 回复" }}</i>
                    </span>
                  </div>
                </div>
                <!-- 评论内容 -->
                <div class="comment-item-content">
                  <span class="content">{{ item.content }}</span>
                </div>
                <!-- 回复框 -->
                <div class="comment-item-reply" v-show="item.reply_show">
                  <el-input :ref="item.comment_id" type="textarea" :rows="3" v-model="comment_reply" :placeholder="'回复：'+item.from_user_name">
                  </el-input>
                  <div class="publish_div">
                    <el-button size="mini" class="publish_btn" @click="addComment(item)">发布</el-button>
                  </div>
                </div>
              </div>
              <!-- 二级评论列表 -->
              <div v-if="item.children != null" style="padding-left: 52px;">
                <div v-for="(item_second) in item.children" :key='item_second.comment_id'>
                  <!-- 二级评论 -->
                  <div class="comment-item">
                    <!-- 评论信息 -->
                    <div class="comment-item-header">
                      <el-avatar :src="item_second.user_all.avatar"></el-avatar>
                      <div class="info">
                        <span class="name">{{ item_second.from_user_name }}</span>
                        <span class="time">{{ getTime(item_second.time) }}</span>
                      </div>
                      <!-- 删除、回复按钮 -->
                      <div class="tool">
                        <span @click="deleteComment(item_second)" v-show="isDeleteShow(item_second)">
                          <i class="iconfont icon-shanchu"> 删除</i>
                        </span>
                        <span @click="showReply(item_second)">
                          <i class="iconfont icon-huifu"> {{ item_second.reply_show ? " 收起" : " 回复" }}</i>
                        </span>
                      </div>
                    </div>
                    <!-- 评论内容 -->
                    <div class="comment-item-body" style="margin-left: 52px">
                      <span class="reply-info">回复 </span>
                      <span class="reply-name">{{item_second.to_user_name}}</span>
                      <span class="reply-info"> :</span>
                      <span class="content">{{item_second.content}}</span>
                    </div>
                    <!-- 回复框 -->
                    <div class="comment-item-reply" v-show="item_second.reply_show" style='margin-left: 52px'>
                      <el-input :ref="item_second.comment_id" type="textarea" :rows="3" v-model="comment_reply"
                        :placeholder="'回复：'+item_second.from_user_name">
                      </el-input>
                      <div class="publish_div">
                        <el-button size="mini" class="publish_btn" @click="addComment(item, item_second)">发布</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 顶部按钮：路由跳转 -->
    <div id='back' @click="goback" :class="{personal_back: path.startsWith('/personal')}">返回
      <i class="iconfont icon-back" />
    </div>

    <!-- 侧边按钮：点赞、收藏、跳转评论 -->
    <div id="sider" :class="{personal_sider: path.startsWith('/personal')}">
      <el-badge :value="article.like" :hidden="like_hidden" :class="{ badge: true, badgeActive: article.isLike }">
        <div class="circle" @click="likeChange">
          <i class="iconfont icon-dianzan" :class="{iconActive: article.isLike }" />
        </div>
      </el-badge>
      <el-badge :value="article.collect" :hidden="article.collect == 0" :class="{ badge: true, badgeActive: article.isCollect }">
        <div class="circle" @click="collectChange">
          <i class="iconfont icon-shoucang" :class="{iconActive: article.isCollect }" />
        </div>
      </el-badge>
      <el-badge :value="comment_total" :hidden="comment_total == 0" class="badge">
        <a href="#article-comment">
          <div class="circle">
            <i class="iconfont icon-pinglun" />
          </div>
        </a>
      </el-badge>
    </div>
  </div>
</template>

<script>
import articleApi from "@/api/article.js";
import likeApi from "@/api/like.js";
import collectApi from "@/api/collect.js";
import commentApi from "@/api/comment.js";
import personalApi from "@/api/personal.js";
import Article from '@/components/Editor/article.vue'
export default {
  components: {
    Article,
  },
  data() {
    return {
      article_id: '',    //文章id
      article: {},       //文章详情
      sign: false,       //文章数据加载完毕的标志
      comment_list: [],  //评论列表
      comment_total: '', //评论总数
      like_hidden: true,
      collect_hidden: true,
      login_avatar: null,  //登录用户的头像
      login_name: null,    //登录用户名
      comment_input: '',   //评论输入input: 一级评论内容
      comment_reply: '',   //评论回复input: 二级评论内容
      publish_btn_show: false,   //控制显隐: 一级评论发布按钮
      comment_reply_show: false, //控制显隐: 二级评论输入框
      path: '', //路由路径
    }
  },
  created() {
    this.article_id=this.$route.params.article_id;
    this.getArticle();
    this.getComment();
    this.getLoginUserAvatar();
    this.path=this.$route.path;
  },
  methods: {
    //获取文章数据
    async getArticle() {
      this.article=await (await articleApi.getDetail(this.article_id)).data
      this.article.user_name=this.article.user_all.user_name
      this.article.like=this.article.num_like.num
      this.article.collect=this.article.num_collect.num
      this.like_hidden=this.article.like==0
      this.collect_hidden=this.article.collect==0
      this.sign=true
    },

    //返回游记广场页面
    goback() {
      if(this.path.startsWith('/scenery')) this.$router.push('/scenery/blogs')
      else if(this.path.startsWith('/personal/post')) this.$router.go(-1)
    },

    //获取登录用户的头像
    async getLoginUserAvatar() {
      const login_user=await personalApi.getInfo();
      this.login_avatar=login_user.data.avatar;
      this.login_name=login_user.data.user_name;
    },

    //获取评论数据
    async getComment() {
      const res=await commentApi.getComment(this.article_id,1);
      this.comment_list=res.data.list;
      this.comment_total=res.data.total;
    },

    //切换点赞状态
    async likeChange() {
      const res=await likeApi.changeLike(this.article_id,1)
      this.article.like=res.data
      this.like_hidden=res.data==0
      this.article.isLike=!this.article.isLike
    },

    //切换收藏状态
    async collectChange() {
      const res=await collectApi.changeCollect(this.article_id,1)
      this.article.collect=res.data
      this.collect_hidden=res.data==0
      this.article.isCollect=!this.article.isCollect
    },

    //一级评论输入框失焦
    comment_input_blur(e) {
      const target=e.relatedTarget;
      if(target!=null&&target.classList!=null) {
        if(target.classList.contains('publish_btn')) return
      }
      this.publish_btn_show=false
    },

    //发表评论
    async addComment(item,item_second) {
      let params={};
      params.topic_id=this.article_id;
      params.topic_type=1;
      if(item==null) {
        // 一级评论
        params.type=0;
        params.content=this.comment_input;
      } else {
        //二级评论
        params.type=1;
        params.content=this.comment_reply;
        if(item_second) {
          params.first_comment_id=item.comment_id;
          params.to_comment_id=item_second.comment_id;
          params.to_user_id=item_second.from_user_id;
          params.to_user_name=item_second.from_user_name;
        }
        else {
          params.first_comment_id=item.comment_id;
          params.to_comment_id=item.comment_id;
          params.to_user_id=item.from_user_id;
          params.to_user_name=item.from_user_name;
        }
      }
      //新增
      const res=await commentApi.addComment(params);
      this.comment_input="";
      this.comment_reply="";
      if(item!=null) item.comment_reply_show=false;
      else this.publish_btn_show=false;
      //获取评论列表、评论数
      this.getComment();
    },

    //删除评论
    async deleteComment(item) {
      //删除
      const res=await commentApi.deleteComment(item.comment_id);
      //获取评论列表、评论数
      this.getComment();
    },

    //删除按钮是否显示
    isDeleteShow(item) {
      return this.login_name==item.from_user_name;
    },

    //回复、收起按钮被点击
    showReply(item) {
      item.reply_show=!item.reply_show;
      if(item.reply_show) {
        //回复按钮被点击
        //聚焦input
        this.$nextTick(() => {
          this.$refs[item.comment_id.toString()][0].focus();
        });
        //关闭其他回复input
        const length=this.comment_list.length;

        for(let i=0;i<length;i++) {
          if(this.comment_list[i].reply_show&&this.comment_list[i].comment_id!=item.comment_id) {
            this.comment_list[i].reply_show=false;
            return;
          }
          if(this.comment_list[i].children!=null) {
            const length_=this.comment_list[i].children.length;
            for(let j=0;j<length_;j++) {
              if(this.comment_list[i].children[j].reply_show&&this.comment_list[i].children[j].comment_id!=item.comment_id) {
                this.comment_list[i].children[j].reply_show=false;
                return;
              }
            }
          }
        }
      }
      this.comment_reply="";
    },

    //转换时间戳为字符串
    getTime(time) {
      return new Date(parseInt(time)).toLocaleString()
    },
  }
}
</script>

<style lang="scss" scoped>
#article {
  position: relative;
  display: -webkit-box;
  -webkit-box-pack: center;
  // -webkit-box-align: center;
  // -webkit-box-orient: vertical;
  height: 968px;
  overflow-y: auto;
  background-color: rgba(34, 52, 87, 0.6);
  border-radius: 8px;
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #1f3964;
    border-radius: 8px;
  }
  .bg {
    width: 972px;
    height: auto;
    padding: 12px 36px;
    background-color: rgba(34, 52, 87, 0.6);
  }
}
.boxheight {
  height: 740px !important;
}

#article-title {
  margin: 16px 0 12px 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.6px;
  user-select: none;
}

#article-info {
  margin-bottom: 20px;
  user-select: none;
  color: #d3d3d3;
  font-size: 16px;
  .name {
    color: #ebebeb;
  }
  .time {
    letter-spacing: 1px;
  }
}

#article-content {
  margin-left: -10px;
}

#back {
  position: fixed;
  top: 120px;
  left: 20px;
  font-family: Tahoma, Helvetica, Arial, "宋体", sans-serif;
  color: #67a1e5;
  text-shadow: 0 0 4px #67a1e5;
  user-select: none;
  cursor: pointer;
}

#sider {
  position: fixed;
  top: 160px;
  left: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  height: 15em;
  user-select: none;
  .circle {
    background: rgba(34, 52, 87, 0.8);
    border-radius: 50%;
    height: 3.6em;
    width: 3.6em;
    text-align: center;
    i {
      font-size: 24px;
      line-height: 58px;
      &:hover {
        color: #67a1e5;
      }
    }
  }
  .iconActive {
    color: #67a1e5;
  }
  .badge {
    ::v-deep .el-badge__content {
      top: 12px;
      right: 12px;
      background-color: #d3d6dd;
    }
  }
  .badgeActive {
    ::v-deep .el-badge__content {
      background-color: #67a1e5;
      color: #ebebeb;
    }
  }
}

.personal_back {
  top: 328px !important;
  left: 364px !important;
}

.personal_sider {
  top: 380px !important;
}

.comment_list {
  h2 {
    margin: 40px 0;
  }
  .comment-item {
    margin-bottom: 12px;
  }
}

#article-comment {
  margin-top: 60px;
  user-select: none;
  ::v-deep .el-textarea__inner {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 24px;
  }
  ::v-deep .comment_input {
    display: flex;
    margin-top: 36px;
    .el-avatar {
      margin-right: 12px;
    }
    .el-textarea__inner {
      width: 848px;
    }
  }
  ::v-deep .publish_div {
    width: 100%;
    overflow: hidden;
    .publish_btn {
      float: right;
      width: 120px;
      height: 40px;
      margin: 12px 0;
      font-size: 16px;
      border-radius: 8px;
    }
  }
  .comment_empty {
    user-select: none;
  }
  .comment-item-header {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    user-select: none;
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
      margin-left: 10.8px;
      letter-spacing: 0.5px;
      .name {
        color: #1296db;
        font-weight: 500;
      }
      .time {
        font-size: 16px;
        line-height: 24px;
        color: #d3d3d3;
      }
    }
    .tool {
      position: absolute;
      right: 0;
      top: 12px;
      font-size: 16px;
      line-height: 24px;
      .icon-shanchu {
        color: #ebebeb;
        vertical-align: 25%;
      }
      .icon-huifu {
        color: #ebebeb;
        margin-left: 8px;
        vertical-align: 25%;
      }
    }
  }
  .comment-item-content {
    padding-left: 52px;
  }
  .comment-item-reply {
    margin-top: 12px;
    margin-left: 52px;
  }
}
</style>